<template>
	<el-dialog title="编辑 Model" :visible.sync="dialogData.showDialog" width="450px" @close="cancelForm">
		<el-form
			ref="model"
			:model="model"
			:rules="rules"
			:label-position="labelPosition"
			:label-width="formLabelWidth"
		>
			<el-form-item label="商品种类编号" v-if="false">
				<el-input v-model="model.categoryId" ></el-input>
			</el-form-item>
			<el-form-item label="商品种类名称">
				<el-input v-model="model.categoryName"></el-input>
			</el-form-item>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelForm()">取 消</el-button>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
export default {
	name: "CategoryEdit",
	props: {
		dialogData: {
			type: Object,
			default: {
				categoryId: 0,
				showDialog: false,
			},
		},
	},
	data: function () {
		return {
			// 弹出框设置项
			formLabelWidth: "100px",
			labelPosition: "right",
			// model
			model: {
				categoryId: 0,
				categoryName:"",
			},
			rules: {
				categoryName: [
					{
						required: true,
						message: "名称不能为空",
						trigger: ["blur", "change"],
					},
				],
			},
		};
	},
	methods: {
		// 取消按钮
		cancelForm: function () {
			this.dialogData.showDialog = false;
		},
		// 提交按钮
		submitForm: function () {
			// 对 form 表单进行验证
			this.$refs["model"].validate((isValid) => {
				if (!isValid) {
					return;
				}
				
				//新增
				if(this.model.categoryId == 0){
					this.$Request
					.fetch_("/api/category/insertCategory", "post", this.model)
					.then((result) => {
						if (result.status == this.$Request.OK_CODE) {
							this.$message.success(result.msg);
							this.$refs["model"].resetFields();
							// 关闭对话框，刷新表格数据
							// 将对话框状态 showEditDialog 发送给父组件，由父组件来完成
							this.$emit("emitDialogData", false);
						} else {
							this.$message.info(result.msg);
						}
					})
					.catch((error) => {
						this.$message.error(error);
					});
				}else{
					//修改
				this.$Request
					.fetch_("/api/category/updateCategory","put",this.model)
					.then((result) => {
						if (result.status == this.$Request.OK_CODE) {
							this.$message.success(result.msg);
							this.$refs["model"].resetFields();
							// 关闭对话框，刷新表格数据
							// 将对话框状态 showEditDialog 发送给父组件，由父组件来完成
							this.$emit("emitDialogData", false);
						} else {
							this.$message.info(result.msg);
						}
					})
					.catch((error) => {
						this.$message.error(error);
					});
				}
			});
			},
	},
	watch: {
		// 监听 dialogData.categoryId，初始化模型
		dialogData: function (newVal, oldVal) {
			console.log(newVal);
			if (newVal.categoryId == 0) {
				if (typeof this.$refs["model"] != "undefined") {
					// 重置 model
					this.model = {
						categoryId:0,
						categoryName:"",
					};
					this.$refs["model"].resetFields();
				};
			} else {
				var url = "/api/category/selectOne/" + newVal.categoryId;
				this.$Request
					.fetch(url)
					.then((result) => {
						console.log(result);
						this.model = result.data;
					})
					.catch((error) => {
						this.$message.info("没有数据。");
					});
			}
		},
	},
};
</script>
<style>
</style>
